<template>
   <infinite-scroll class="content" @pull-up="pullUpAction" @pull-down="pullDownAction" ref="scroll">
    <div class="wrap">
    <img src="/img/yaya.png" alt="" class="topimg">

      <div class="nav">
        <router-link to="/grade">
          <div class="nav-i">
            <img src="/img/jifen.png" alt="">
            <!-- <span>积分商城</span> -->
            <span>积分商城</span>
          </div>
        </router-link>
        <router-link to="/medal">
          <div class="nav-i">
            <img src="/img/xunzhang.png" alt="">
            <span>我的勋章</span>
          </div>
        </router-link>
        <router-link to="/coupon">
          <div class="nav-i">
            <img src="/img/youhuiq.png" alt="">
            <span>优惠券</span>
          </div>
        </router-link>
        <router-link to="/signin">
          <div class="nav-i">
            <img src="/img/qiandao.png" alt="">
            <span>每日签到</span>
          </div>
        </router-link>
      </div>

      <img class="banner" src="/img/banner.png" alt="">
  
  
      <div class="title">
        <img src="/img/border.png" alt="">
        <span>空调精选</span>
        <img src="/img/border.png" alt="">
      </div>

      <ul class="list">
        <li v-for="item in data" :key="item.id">
          <img :src="item.airImage" alt="">
          <h1>{{item.title}}</h1>
        <span style="float:left;">￥{{item.price}}</span><i style="float:right;" @click="Install(item.id)">预约安装</i>
        </li>
      </ul>
      </div>
      </infinite-scroll>
</template>

<script>
import axios from 'axios';
import { mapState } from "vuex";

export default {
  data(){
    return{
      isLoadMore:false,
      id:[]
    }
  },
  computed:{
    ...mapState({
      data: (state) => state.homeList.bottomListData,
      idData:state=>state.homeList.movieIdList,
      loading:state=>state.homeList.loading
    })
  },
  watch:{
    loading(newVal){
    }
  },
  methods:{

     async requestMoreList(isLoadMore){
      if(this.data.length>=30){
          this.$refs.scroll.endPullUp();
          this.$refs.scroll.endLast();
          return;
      }
      this.$store.dispatch("homeList/requestMoreListData");
      
      const unwatch = this.$watch("loading", (newVal) => {
        if (!newVal) {
          if (isLoadMore === false) {
            //下拉刷新的请求
            // 关闭下拉刷新的效果
            this.$refs.scroll.endPullDown();
          } else if (isLoadMore === true) {
            //加载更多的请求
            // 关闭上拉加载更多的效果
            this.$refs.scroll.endPullUp();
          } else {
            //isLoadMore = undefined
            //初始化加载，切换的加载的请求
            // 滚动滚动视图到最顶部
            this.$refs.scroll.scrollToTop();
          }
          //移除监听
          unwatch();
        }
      });
    },


    pullUpAction(){
      this.requestMoreList(true);
    },

    pullDownAction(){
      this.$store.dispatch("homeList/requestresetListData");
      this.$refs.scroll.endPullDown();
    },

    Install(id){
      this.$router.push({name:'Order',params:{id}});
      if(localStorage.getItem("id")){
        this.id = JSON.parse(localStorage.getItem("id"));
        var result=this.id.filter(item=>{
            if(item.id===id){
                item.num++;
            }
            return item.id===id;
        })
        if(result.length===0){
            this.id.push({id:id,num:1});

        }
        localStorage.setItem('id',JSON.stringify(this.id));
    }else{
        this.id.push({id:id,num:1});
        localStorage.setItem('id',JSON.stringify(this.id))
    }
    }
  },

  mounted(){
    this.$store.dispatch("homeList/requestresetListData");
  }
}
</script>

<style lang="scss" scoped>
.content{
  width: 100%;
  height: 100%;
}

// .warp{
//   position: absolute;
//   // overflow-y: auto;
//   top: 0;
//   bottom: 50px;
// }
.topimg{
  width:100%;
  height: 234px;
}

.nav{
  width: 100%;
  height: 60px;
  // background: peru;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: -20px;
  .nav-i{
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 11px;
    color: #666;
    img{
      width: 34px;
      height: 34px;
      margin-bottom: 4px;
    }
  }
}

.banner{
  width: 100%;
  height: 90px;
}
.title{
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
  img{
    width: 27px;
    height: 5px;
    margin: 0 6px;
  }
}

.list{
  width: 100%;
  box-sizing: border-box;
  padding: 0 20px;
  
  // overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  li{
    width:150px;
    height: 212px;
    // background: chocolate;
    margin: 10px 0;
    // text-align: center;
    padding: 0 5px;
    box-sizing: border-box;
    img{
      width:140px;
      height: 140px;
    }
    h1{
      width: 100%;
      display: -webkit-box;    
      -webkit-box-orient: vertical;    
      -webkit-line-clamp: 2;    
      overflow: hidden;
      font-size: 13px;
      margin-top: 12px;
    }
    span{
      font-size: 13px;
      font-weight: bold;
      margin-top: 12px;
      color: #CC3429;
    }
    i{
      margin-top: 12px;
      background: rgba(151, 49, 248, 1);
      padding: 2px 5px;
      border-radius: 5px;
      color: white;
    }
  }
}
</style>